<template>
  <view class="releaseType_box" :class="show?'cartoon_box1':'cartoon_box2'" @click.stop="_close">
    <view class="releaseType_content" :style="'padding-top:'+(globalData.navHeight-globalData.menuButtonObject.height)+'px;'">
      <view class="release_box_top">
        <image src="https://image.qqpyyds.com/mpAppImg/other/new_logo.png" class="logo_box" />
        <view class="group_5">
          <text class="text">{{playvolumeFn(topDetail.communityCount) || 0}}个社群 | {{playvolumeFn(topDetail.dynamicCount) || 0}}个创作 | {{playvolumeFn(topDetail.joinCount) || 0}}人参与</text>
        </view>
        <veiw class="swiper_view">
          <swiper
              class="swiper_box"
              :indicator-dots="false"
              :interval="3000"
              :duration="100"
              :autoplay="true"
              :current="current"
              :disable-touch="false"
              :touchable="false"
              circular
              vertical
          >
            <swiper-item v-for="(item, index) in topDetail.scrollMessageList" :key="index" @touchmove.stop>
              <view class="swiper_item">{{item}}</view>
            </swiper-item>
          </swiper>
        </veiw>
        <view class="copywriting_box">有货的，来给下游供货赚钱；</view>
        <view class="copywriting_box">有人的，来一键帮卖快速变现；</view>
        <view class="copywriting_box">有才的，来创作笔记赚复用收益。</view>
      </view>
      <view class="release_box_bottom">
        <view class="operation_btn_box operation_bg" @click.stop="navigateTo({url: '/pagesA/release/issueEdit?pageType=2'}),_close(1)">
          <view>
            <view class="fz-16 fw6">笔记带货</view>
            <view class="fz-12 u-m-t-8 viceColorN7">选个商品创作笔记，躺赚笔记复用收益</view>
          </view>
          <view class="icon_box">
            <image class="img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/create.png" alt="">
          </view>
        </view>
        <view class="operation_btn_box operation_bg" @click.stop="navigateTo({url: '/pagesB/canHelpSell/index'}),_close(1)">
          <view>
            <view class="fz-16 fw6">帮卖赚钱</view>
            <view class="fz-12 u-m-t-8 viceColorN7">高佣好货笔记齐全，一键帮卖快速出单</view>
          </view>
          <view class="icon_box">
            <image class="img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/helpSell.png" alt="">
          </view>
        </view>
        <view class="operation_boxs">
          <view class="operation_con operation_bg" @click.stop="navigateTo({url: '/pagesA/libraryGoods/libraryGoods'}),_close(1)">
            <view>
              <i class="iconfont icon-item fz-22 themeFontColor" />
            </view>
            <view>
              <view class="fz-14 fw6">发布商品</view>
              <view class="fz-12 u-m-t-8 viceColorN7">3秒上架开卖</view>
            </view>
          </view>
          <view class="operation_con operation_bg" @click.stop="navigateTo({url: '/pagesA/release/issueEdit?pageType=1'}),_close()">
            <view>
              <i class="iconfont icon-dongtai fz-22 themeFontColor" />
            </view>
            <view>
              <view class="fz-14 fw6">发布动态</view>
              <view class="fz-12 u-m-t-8 viceColorN7">吸引粉丝关注</view>
            </view>
          </view>
        </view>
        <view class="close_box" @click.stop="_close">
          <i class="iconfont icon-close fz-16 fw6" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import miniApi from '@/api/mini.js'
import Util from "@/api/util.js"
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show(nVal){
      if (nVal) this._getTopDetail()
    }
  },
  data () {
    return {
      topDetail: {
        communityCount: 0,
        dynamicCount: 0,
        joinCount: 0,
        scrollMessageList: [],
        shoppingCartCount: 0
      }, // 气泡+社区数量
    }
  },
  computed: {
    globalData () {
      // console.log(this.$store.state.globalData)
      return this.$store.state.globalData
    },
  },
  methods: {
    // 获取社群数量
    async _getTopDetail() {
      const res = await miniApi.topDetail()
      if (res.code === 200) {
        this.topDetail = res.data
      }
    },
    // 处理数据过万的显示
    playvolumeFn (mun) {
      return Util.playvolume(mun)
    },
    // 关闭弹窗
    _close(type){
      let mun = 0 // 加时间是为了点击跳转路由关闭自身。正常关闭不延迟关闭
      if (type == 1) mun = 1000
      setTimeout(() => {
        this.$emit('close')
      }, mun);
    }
  }
}
</script>
<style lang="scss" scoped>
.releaseType_box {
  position: fixed;
  left: 0;
  width: 100vw;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(32px);
  height: 100vh;
}
.cartoon_box1 {
  bottom: 0;
  transition: bottom .3s;
}
.cartoon_box2 {
  bottom: -100vh;
  transition: bottom .3s;
}
.releaseType_content {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  height: calc(100% - 100rpx - constant(safe-area-inset-bottom));
  height: calc(100% - 100rpx - env(safe-area-inset-bottom));
  padding-left: 48rpx;
  padding-right: 48rpx;
  .release_box_top {
    .logo_box {
      width: 446rpx;
      height: 66rpx;
    }
    .group_5 {
      padding: 10rpx 0;
      .text {
        color: $n8Color;
        font-size: 24rpx;
        line-height: 34rpx;
        white-space: nowrap;
        margin-left: 0;
      }
    }
    .swiper_view {
      .swiper_box {
        height: 44rpx;
        margin: 0rpx 0 48rpx 0;
        padding: 0;
        box-sizing: border-box;
        .swiper_item {
          display: inline-block;
          font-size: 20rpx;
          padding: 0rpx 16rpx;
          color: #fff;
          background: #FFC3B5;
          border-radius: 100rpx;
          box-sizing: border-box;
          line-height: 36rpx;
        }
      }
    }
    .copywriting_box {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #323233;
      margin-bottom: 16rpx;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .release_box_bottom {
    .operation_btn_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;
    }
    .operation_bg {
      padding: 32rpx;
      border-radius: 16rpx;
      background: rgba(255, 255, 255, .96);
    }
    .operation_boxs {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .operation_con {
        width: calc(50% - 12rpx);
        display: flex;
        align-items: center;
        .iconfont {
          margin-right: 20rpx;
        }
      }
    }
    .close_box {
      width: 40rpx;
      height: 40rpx;
      margin: 100rpx auto 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.icon_box {
  width: 80rpx;
  height: 80rpx;
  .img_box {
    width: 100%;
    height: 100%;
  }
}
</style>